
<template>
  <div class="headlogin">
    {{ $store.state.a }}

    <van-nav-bar left-arrow title="登录" @click-left="go"></van-nav-bar>
    <van-form @submit="onSubmit">
      <!-- field 字段 -->
      <van-field
        v-model="username"
        name="username"
        label="手机号"
        placeholder="请填写手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
        ]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请填写密码"
        :rules="[
          { required: true, message: '请填写密码' },
          {
            validator: (e) => /^\w{6,12}$/.test(e),
            message: '密码格式错误,需要是6-12位的字母或数字',
          },
        ]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>

      <!-- <router-link to="/forget">忘记密码</router-link>
      <router-link to="/forget">注册</router-link> -->
    </van-form>
    <div class="forget">
      <div class="bomtl">
        <router-link to="/reg" style="color: #7e7473"
          >验证码登录/注册</router-link
        >
      </div>
      <div class="bomtr">
        <router-link to="/forget" style="color: #7e7473">忘记密码?</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/user";
import { Form } from "vant";
import { Field } from "vant";
import { Button } from "vant";
export default {
  data() {
    return {
      user: [],
      show: true,
      username: "",
      password: "",
    };
  },
  components: {
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
  },
  mounted() {},
  methods: {
    go() {
      this.$router.go(-1);
    },
    onSubmit(values) {
      console.log(values); //打印values是一个对象
      //形参是接收的传过来的对象数据

      login({
        username: this.username,
        password: this.password,
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          let { token } = res;
          localStorage.setItem("token", token); //通行证 验证身份 过期时间
          this.$store.dispatch("getUserInfo", token);

          // this.$store.dispatch("getUserInfo", localStorage.getItem("token"));
          // localStorage.setItem("uid", uid);
          // localStorage.setItem("useeInfo", JSON.stringify(userInfo));

          // //刷新丢失
          // this.$store.commit("change", { key: "uid", value: "uid" });
          // this.$store.commit("change", { key: "token", value: "token" });
          // this.$store.commit("change", {
          //   key: "userInfo",
          //   value: "userInfo",
          // });
          // this.$store.commit("change", { key: "isLogin", value: true });

          setTimeout((v) => {
            this.$router.back();
          }, 100);

          //success
        } else {
          this.$toast(res.msg || "登录失败");
        }
      });
    },
  },
};
</script>
<style lang="less">
.headlogin {
  background-color: @color3;
  height: @height;
  .van-button--round {
    border-radius: 0;
  }
  .van-button--info {
    background-color: @colorn;
    border: 1px solid @colorn;
    border-radius: 5px;
  }
  .forget {
    font-size: 3.9vw;
    padding: 2.66667vw 4.66667vw;
  }
  .bomtl {
    float: left;
  }
  .bomtr {
    float: right;
  }
}
</style>